<script setup lang="ts">
import { FormInst } from 'naive-ui'

const formRef = $ref<FormInst>()
// prettier-ignore
const form = $ref({
	required : '',
	number   : undefined,
	date     : '',
	email    : '',
	hex      : '',
	len      : '',
	regexp   : '',
	enum     : ''
})
</script>

<template>
	<div class="flex-col flex">
		<n-form
			:model="form"
			ref="formRef"
			label-width="80"
			_grid="~ gap-5"
			_sm="grid-cols-2"
			_md="grid-cols-3"
			_lg="grid-cols-4"
		>
			<n-form-item label="必填项" path="required" :rule="$validator().required().val()">
				<n-input v-model:value="form.required" placeholder="必填项" />
			</n-form-item>

			<div>如果你需要为一个值为 number 类型的表项设定 required，你需要在 rule 对象中设定 `type: number`。</div>
			<n-form-item label="必填项数字" path="number" :rule="$validator().required({ type: 'number' }).val()">
				<n-input-number v-model:value="form.number" placeholder="数字" />
			</n-form-item>

			<n-form-item label="日期" path="date" :rule="$validator().date().val()">
				<n-input v-model:value="form.date" placeholder="2022-12-12" />
			</n-form-item>

			<n-form-item
				label="动态提示，如i18n"
				path="required"
				:rule="
					$validator()
						.required({ renderMessage: () => $t('test') })
						.val()
				"
			>
				<n-input v-model:value="form.required" placeholder="必填项" />
			</n-form-item>

			<n-form-item
				label="email邮箱"
				path="email"
				:rule="
					// prettier-ignore
					$validator()
						.required({ message: '这是必填项，懂？' })
						.email()
						.min(20, { message: '你的这么短？？', trigger: (['input', 'blur']) })
						.max(19, { message: '你也配有邮箱？', trigger: 'input' })
						.val()
				"
			>
				<n-input v-model:value="form.email" placeholder="666@qq.com" />
			</n-form-item>

			<n-form-item label="len固定长度" path="len" :rule="$validator().len(10).val()">
				<n-input v-model:value="form.len" placeholder="必须是10个字符" />
			</n-form-item>

			<n-form-item
				label="hex十六进制"
				path="hex"
				:rule="
					$validator()
						.hex({ message: '来个五彩斑斓的黑', trigger: 'input' })
						.min(7, { message: '你还是这么短，我要那种#696969' })
						.val()
				"
			>
				<n-input v-model:value="form.hex" placeholder="#333" />
			</n-form-item>

			<n-form-item
				label="正则/^虎.*蛇$/"
				path="regexp"
				:rule="
					// prettier-ignore
					$validator()
						.match(
							/^虎.*蛇$/,
							'虎头蛇尾不是虎头蛇尾，虎头蛇才是虎头蛇尾',
							{ trigger: (['input', 'blur'])
						})
						.val()
				"
			>
				<n-input v-model:value="form.regexp" />
			</n-form-item>

			<n-form-item
				label="枚举"
				path="enum"
				:rule="$validator().enum(['牛', '牛逼', '很牛逼'], { message: '牛皮吹破了', trigger: 'change' }).val()"
			>
				<n-select
					v-model:value="form.enum"
					size="medium"
					:options="[
						{ label: '牛', value: '牛' },
						{ label: '牛逼', value: '牛逼' },
						{ label: '很牛逼', value: '很牛逼' },
						{ label: '超级牛逼', value: '超级牛逼' }
					]"
					clearable
				/>
			</n-form-item>
		</n-form>

		<div _flex="~ justify-end" _m="t-auto" _space="x-5">
			<n-button @click="() => formRef.restoreValidation()"> 重置表单校验 </n-button>
			<n-button type="primary" @click="() => formRef.validate()"> 提交表单了喂 </n-button>
		</div>
	</div>
</template>
